<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<html>
<head>
<meta http-equiv="pragma" content="no-cache"> 
<meta http-equiv="cache-control" content="no-cache"> 
<meta http-equiv="expires" content="0"> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>数据展示</title>
<script type="text/javascript" src="JsPie/jquery.js"></script>
<script src="JsPie/highcharts.js"></script>
<script type="text/javascript" src="JsPie/PieData.js"></script>

<style type="text/css">
${
demo.css
}
</style>

<script type="text/javascript">
	var btn_submit = document.getElementById("btn_submit");
	var btn_reset = document.getElementById("btn_reset");
	var interval;
	var char;
	$(function() {
		 chart=new Highcharts.Chart(
						{
							chart : {
							renderTo:'container',								
								type : 'pie'
							},
							title : {
								text : 'Browser market shares January, 2015 to May, 2015'
							},
							tooltip : {
								pointFormat : '{series.name}: <b>{point.percentage:.1f}%</b>'
							},
							plotOptions : {
								pie : {
									allowPointSelect : true,
									cursor : 'pointer',
									dataLabels : {
										enabled : true,
										format : '<b>{point.name}</b>: {point.percentage:.1f} %',
										style : {
											color : (Highcharts.theme && Highcharts.theme.contrastTextColor)
													|| 'black'
										}
									}
								}
							},
							series : [ {
								name : "Brands",
								colorByPoint : true,
								data : pieData()
							} ]
						});
		/*------------------------------------------------------------------------------------------------------------------------------------------- */
		/*function getForm() {
			//使用JQuery从后台获取JSON格式的数据  
			jQuery.getJSON('http://localhost:8080/sei239/servlet/PieTest?sql=select'+'&timer='+'timer', null,
					function(data) {
						//为图表设置值  
						chart.series[0].setData(data);
					});
		}

		$(document).ready(function() {
			//每隔3秒自动调用方法，实现图表的实时更新  
			window.setInterval(getForm, 3000);

		});*/
		/*------------------------------------------------------------------------------------------------------------------------------------------- */

	});

	function submit() {
		chart.series[0].setData(getData());;
	};
	function reset() {
		clearInterval(interval);
	};
</script>
</head>
<body>

	<div id="container"
		style="min-width: 500px; height: 600px; max-width: 900px; margin: 0 auto"></div>

	<!-- -------------------------------------------------------------------- -->
	<input type="text" id="select"
		style="width: 600;height:30;border:2px solid " value="sql语句输入区域"
		onmouseover="javascript:if(this.value=='sql语句输入区域')this.value='';"
		onmouseout="javascript:if(this.value=='')this.value='sql语句输入区域';">
	<br />
	<br />
	<input type="text" id="timer"
		style="width: 150;height:30;border:2px solid " value="输入定时时间（秒）"
		onmouseover="javascript:if(this.value=='输入定时时间（秒）')this.value='';"
		onmouseout="javascript:if(this.value=='')this.value='输入定时时间（秒）';">
	<br />
	<br />
	<input type="button" id="btn_submit" value="确定提交" onclick="submit()" />
	<input type="button" id="btn_reset" value="重置参数" onclick="reset()" />
	<br />

</body>
</html>
